<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发布项目</title>

    <!-- Css (necessary Css) -->
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap.min.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap-theme.css')}"
          media="all">
    <link rel="stylesheet"
          th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/language-selector-remove-able-css.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/flexslider.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/style.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/plugin.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/menu.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/responsive.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/color.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/iconmoon.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/themetypo.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/widget.css')}" media="all">
    <link rel="icon" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/images/favicon.ico')}"
          type="image/x-icon"/>
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/layui/css/layui.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/css/eleTree.css')}" media="all">
    <!-- jQuery (necessary JavaScript) -->
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/bootstrap.min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/modernizr.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/menu.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.flexslider-min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/functions.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        .edit-top-bnts {
            float: right;
        }

        .my_icon {
            margin-right: 4px;
            line-height: 56px;
            padding-left: 6px;
            width: 10px;
            color: #DEE0E1;
            font-size: 20px;
        }

        .done span i {
            color: #FE6500;
        }

        .done span {
            font-weight: bold
        }

        .success span i {
            color: #00CBA6;
        }

        .nav_item {
            font-size: 18px;
            cursor: pointer;
        }

        .layui-input-block {
            margin-left: 10px;
            margin-right: 10px;
        }

        .layui-input-block input {
            color: #0C0C0C;
        }

        .ep-form-label {
            font-size: 20px;
            font-weight: bolder;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-small_label {
            float: left;
            width: 200px;
            font-size: 16px;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-item-require:after {
            display: inline-block;
            margin-left: 10px;
            content: "*";
            line-height: 1;
            font-size: 20px;
            color: #f5222d
        }

        .prompt-txt {
            font-size: 14px;
            line-height: 1.5;
            margin-top: 50px;
            color: #7a8087;
        }

        .img_div {
            background-color: #f8f8f9;
            margin-top: 30px;
            margin-left: 10px;
            margin-right: 10px;
            border: #DEE0E1 solid 1px;
            text-align: center;
            font-size: 16px;
        }

        .img_div:focus {
            border-color: #94b2fa !important;
            box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.2);
        }

        .payback-name {
            float: left;
            font-size: 16px;
            line-height: 1.75;
            font-weight: 700;
            margin-left: 10px;
        }

        .payback-title {
            position: relative;
            font-size: 24px;
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #dee0e1;
        }

        .payback-title:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .description {
            display: block;
            width: 100%;
            line-height: 1.5;
            background: none;
            font-size: 16px;
            color: #222c37;
            resize: none;
        }

        .reward_div {
            border: #DEE0E1 solid 1px;
            margin-top: 50px;
        }

        .reward-front {
            border-left: #DEE0E1 solid 1px;
            border-bottom: #DEE0E1 solid 1px;
            text-align: left;
            padding-left: 10%;
            height: 41px;
        }

        .reward-front span {
            margin-left: 10px;
            text-align: left;
            font-size: 17px;
            line-height: 40px;
        }

        .reward-front .require_span:after {
            display: inline-block;
            margin-left: 10px;
            content: "*";
            line-height: 1;
            font-size: 17px;
            color: #f5222d
        }

        .reward-back {
            border-left: #DEE0E1 solid 1px;
            border-bottom: #DEE0E1 solid 1px;
            height: 41px;
            margin-right: 0px;
        }

        .reward-back span {
            margin-left: 10px;
            text-align: center;
            font-size: 17px;
            line-height: 40px;
        }

        .reward-back input {
            color: #0C0C0C;
        }

        .load_new_reward {
            width: 100%;
            height: 54px;
            margin-bottom: 20px;
            background-color: #FE6500;
            text-align: center;
            font-size: 18px;
            color: #0C0C0C;
            padding-top: 10px;
        }

        .load_remove_reward {
            width: 100%;
            height: 54px;
            margin-bottom: 20px;
            margin-left: 0px !important;
            background-color: #4F4A9C;
            text-align: center;
            font-size: 18px;
            color: #0C0C0C;
            padding-top: 10px;
        }

        .reward_select_lable {
            display: inline;
            font-size: 17px;
            line-height: 40px;
            margin-left: 10px;
        }
        .layui-input{
            padding-left: 10% !important;
        }
    </style>
</head>
<body>
<!-- Header -->
<div th:replace="../templates/ep/front/crowd/header :: main-header"></div>
<!-- Header -->
<!-- body-->
<div class="layui-container" style="border-top: #DEE0E1  solid 1px;">
    <div class="layui-row" style="margin-top: 50px">
        <div class="layui-col-md4">
            <h3 style="font-size: 30px;">编辑项目资料</h3>
        </div>
        <div class="layui-col-md4 layui-col-md-offset4">
            <div id="btns" class="edit-top-bnts">
                <div id="preview" class="layui-btn" style="background-color: #FE6500;width: 90px; height: 40px">
                    <span>预览</span>
                </div>
                <div id="confirm" class="layui-btn hidden" style="background-color: #FE6500;width: 90px;height: 40px">
                    <span>提交审核</span>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" style="margin-top: 50px;border: #DEE0E1  solid 1px">
        <div id="project_base" class="layui-col-md2 nav_item layui-col-md-offset1">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>基础信息</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_material" class="layui-col-md2 nav_item">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>项目素材</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_detail" class="layui-col-md2 nav_item">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>详情编辑</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_reward" class="layui-col-md2 nav_item done">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>回报设置</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_team" class="layui-col-md2 nav_item">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>团队成员</span>
            <!--            <span><i class="layui-icon my_icon done">&#xe602;</i></span>-->
        </div>
    </div>
</div>
<div class="layui-container">
    <div style="margin-top: 50px">
        <input type="text" class="hidden layui-input" name="projectId" data-th-value="${project.projectId}">
        <label class="ep-form-label ep-form-item-require">无偿支持档</label>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md4">
                    <span class="payback-name">无偿支持</span>
                </div>
                <div class="layui-col-md8">
                    <div class="layui-row payback-title"><span>无偿支持</span></div>
                    <div class="layui-row "><span class="description">不需要回报，我只是支持有梦想的人。</span></div>
                </div>
            </div>
            <label class="prompt-txt layui-input-block">
                系统默认置顶，不可修改或删除。此档位不需要给支持用户发放回报。
            </label>
        </div>

        <label class="ep-form-label ep-form-item-require">自定义回报档</label>
        <div class="layui-form-item" id="package_reward">
            <div class="layui-row reward_div" id="reward1">
                <div class="layui-col-md2">
                    <span class="payback-name">回报档1</span>
                    <input class="layui-input hidden" type="text" name="id">
                </div>
                <div class="layui-col-md10">
                    <div class="layui-row">
                        <div class="layui-col-md4 reward-front"><span class="require_span">支持金额</span></div>
                        <div class="layui-col-md8 reward-back"><input class="layui-input" type="text" name="support"
                                                                      placeholder="请输入档位金额">
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md4 reward-front"><span class="require_span">回报标题</span></div>
                        <div class="layui-col-md8 reward-back"><input class="layui-input" type="text" name="title"
                                                                      placeholder="请输入回报标题,最多10个汉字"></div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md4 reward-front"><span class="require_span">回报描述</span></div>
                        <div class="layui-col-md8 reward-back"><input class="layui-input" type="text" name="introduce"
                                                                      placeholder="请输入回报描述,最多30个汉字"></div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md4 reward-front"><span class="require_span">回报发放时间</span></div>
                        <div class="layui-col-md8 reward-back">
                            <!--                            <input class="layui-input" type="text" name="provideTime"  placeholder="请选择回报时间" readonly>-->

                            <label class="reward_select_lable">年份</label>
                            <select style="width: 33.33333333%" name="provideYear">
                                <option>请选择发放年份</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                            </select>
                            <label class="reward_select_lable">月份</label>
                            <select style="width: 33.33333333%" name="provideMonth">
                                <option>请选择发放月份</option>
                                <option value="01">01月</option>
                                <option value="02">02月</option>
                                <option value="03">03月</option>
                                <option value="04">04月</option>
                                <option value="05">05月</option>
                                <option value="06">06月</option>
                                <option value="07">07月</option>
                                <option value="08">08月</option>
                                <option value="09">09月</option>
                                <option value="10">10月</option>
                                <option value="11">11月</option>
                                <option value="12">12月</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-btn load_new_reward" id="new_reward">
            <span><i class="layui-icon" -icon>&#xe624;</i>添加新的回报</span>
        </div>
        <div class="layui-btn load_remove_reward hidden" id="remove_reward">
            <span><i class="layui-icon" -icon>&#xe67e;</i>删除最后一个回报</span>
        </div>
        <div class="layui-form-item" style="float: right">
            <div class="layui-input-block">
                <button class="layui-btn" id="project_reward_sub"
                        style="background-color: #FE6500; height: 40px">保存,进入下一步
                </button>
                <!--                <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </div>
</div>
<!--// CopyRight //-->
<div th:replace="../templates/ep/front/crowd/footer :: footer"></div>
<!--// CopyRight //-->

<script th:inline="javascript">
    layui.use(['upload', "layer", 'form', 'layedit'], function () {
        let ctx = [[@{/}]];
        var upload = layui.upload
            , layer = layui.layer
            , form = layui.form
            , layedit = layui.layedit;

        var project = [[${project}]];
        var rewards = [[${rewards}]];
        var index = 1;


        $("#new_reward").click(function () {
            index = index + 1;
            if (index > 1) {
                $("#remove_reward").removeClass("hidden")
            }
            $("#package_reward").append("<div class=\"layui-row reward_div\" id=\"reward"+index+"\">\n" +
                "                <div class=\"layui-col-md2\">\n" +
                "                    <span class=\"payback-name\">回报档"+index+"</span>\n" +
                "                    <input class=\"layui-input hidden\" type=\"text\" name=\"id\">\n" +
                "                </div>\n" +
                "                <div class=\"layui-col-md10\">\n" +
                "                    <div class=\"layui-row\">\n" +
                "                        <div class=\"layui-col-md4 reward-front\"><span class=\"require_span\">支持金额</span></div>\n" +
                "                        <div class=\"layui-col-md8 reward-back\"><input class=\"layui-input\" type=\"text\" name=\"support\"\n" +
                "                                                                      placeholder=\"请输入档位金额\">\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-row\">\n" +
                "                        <div class=\"layui-col-md4 reward-front\"><span class=\"require_span\">回报标题</span></div>\n" +
                "                        <div class=\"layui-col-md8 reward-back\"><input class=\"layui-input\" type=\"text\" name=\"title\"\n" +
                "                                                                      placeholder=\"请输入回报标题,最多10个汉字\"></div>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-row\">\n" +
                "                        <div class=\"layui-col-md4 reward-front\"><span class=\"require_span\">回报描述</span></div>\n" +
                "                        <div class=\"layui-col-md8 reward-back\"><input class=\"layui-input\" type=\"text\" name=\"introduce\"\n" +
                "                                                                      placeholder=\"请输入回报描述,最多30个汉字\"></div>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-row\">\n" +
                "                        <div class=\"layui-col-md4 reward-front\"><span class=\"require_span\">回报发放时间</span></div>\n" +
                "                        <div class=\"layui-col-md8 reward-back\">\n" +
                "                            <!--                            <input class=\"layui-input\" type=\"text\" name=\"provideTime\"  placeholder=\"请选择回报时间\" readonly>-->\n" +
                "\n" +
                "                            <label class=\"reward_select_lable\">年份</label>\n" +
                "                            <select style=\"width: 33.33333333%\" name=\"provideYear\">\n" +
                "                                <option>请选择发放年份</option>\n" +
                "                                <option value=\"2021\">2021</option>\n" +
                "                                <option value=\"2022\">2022</option>\n" +
                "                                <option value=\"2023\">2023</option>\n" +
                "                                <option value=\"2024\">2024</option>\n" +
                "                            </select>\n" +
                "                            <label class=\"reward_select_lable\">月份</label>\n" +
                "                            <select style=\"width: 33.33333333%\" name=\"provideMonth\">\n" +
                "                                <option>请选择发放月份</option>\n" +
                "                                <option value=\"01\">01月</option>\n" +
                "                                <option value=\"02\">02月</option>\n" +
                "                                <option value=\"03\">03月</option>\n" +
                "                                <option value=\"04\">04月</option>\n" +
                "                                <option value=\"05\">05月</option>\n" +
                "                                <option value=\"06\">06月</option>\n" +
                "                                <option value=\"07\">07月</option>\n" +
                "                                <option value=\"08\">08月</option>\n" +
                "                                <option value=\"09\">09月</option>\n" +
                "                                <option value=\"10\">10月</option>\n" +
                "                                <option value=\"11\">11月</option>\n" +
                "                                <option value=\"12\">12月</option>\n" +
                "                            </select>\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                </div>\n" +
                "            </div>")

        })
        $("#remove_reward").click(function () {
            $("#reward" + index + "").remove();
            index = index - 1;
            if (index == 1) {
                $("#remove_reward").addClass("hidden")
            }

        })
        $("#project_reward_sub").click(function () {
            var packages = $('.reward_div');
            var data = {};
            var subFlag = true;
            for (var i = 0; i < packages.length; i++) {
                var map = {};
                var id = packages[i].id;
                var $view = $("#" + id + "");
                var id = $view.find("input[name='id']").val();
                var support = $view.find("input[name='support']").val();
                var title = $view.find("input[name='title']").val();
                var introduce = $view.find("input[name='introduce']").val();
                var provideYear = $view.find("select[name='provideYear']").val();
                var provideMonth = $view.find("select[name='provideMonth']").val();
                var pid = $("input[name='projectId']").val();
                map['id'] =id;
                map["pid"] = pid;
                map["support"] = support;
                map["title"] = title;
                map["introduce"] = introduce;
                map["provideYear"] = provideYear;
                map["provideMonth"] = provideMonth;
                var month = provideMonth;
                var year = provideYear;
                var temp = project.fundEnd.toString().split("-")[0];
                var temp1 = project.fundEnd.toString().split("-")[1];

                if (year < temp) {
                    layer.msg('回报发放时间不能早于项目结束时间：' + project.fundEnd.toString().split("-")[0] + "年" + project.fundEnd.toString().split("-")[1] + "月", {icon: 5});
                    subFlag = false;
                    break;
                }
                if (year == temp) {
                    if (month < temp1) {
                        layer.msg('回报发放时间不能早于项目结束时间：' + project.fundEnd.toString().split("-")[0] + "年" + project.fundEnd.toString().split("-")[1] + "月", {icon: 5});
                        subFlag = false;
                        break;
                    }
                }

                if (support == "") {
                    layer.msg('必填项不能为空', {icon: 5});
                    subFlag = false;
                    break;
                }
                if (title == "") {
                    layer.msg('必填项不能为空', {icon: 5});
                    subFlag = false;
                    break;
                }
                if (introduce == "") {
                    layer.msg('必填项不能为空', {icon: 5});
                    subFlag = false;
                    break;
                }
                if (provideYear == "" || provideYear.length > 4) {
                    layer.msg('必填项不能为空', {icon: 5});
                    subFlag = false;
                    break;
                }
                if (provideMonth == "" || provideMonth.length > 2) {
                    layer.msg('必填项不能为空', {icon: 5});
                    subFlag = false;
                    break;
                }
                if (!(/(^[1-9]\d*$)/.test(support))) {
                    layer.msg('支持金额应为正整数', {icon: 5});
                    subFlag = false;
                    break;
                }
                if (support > 10000 || support < 2) {
                    layer.msg('支持金额应在2~10000之间', {icon: 5});
                    subFlag = false;
                    break;
                }
                if (title.length > 10) {
                    layer.msg('标题不能超过10个字', {icon: 5});
                    subFlag = false;
                    break;
                }
                if (introduce.length > 30) {
                    layer.msg('描述不能超过30个字', {icon: 5});
                    subFlag = false;
                    break;
                }
                data[i] = map;
            }
            if (subFlag) {
                let index = layer.load('', {time: 5 * 1000});
                $.ajax({
                    "url": "/web/updateProjectReward",  // 请求目标资源的地址
                    "type": "post",            // 请求方式
                    "contentType": "application/json;charset=UTF-8",
                    "data": JSON.stringify(data),          // 要发送的请求参数、
                    "success": function (data) { // 服务器成功的回调函数
                        if (data.code == 200) {
                            window.location.href = "/web/project_team?id=" + data.data;
                            layer.close(index);
                        }
                    },
                    "error": function (response) {   // 服务器失败的回调函数
                        // alert(response);
                    }
                });
            }
        })

        // 赋值
        if (rewards != null && rewards.length > 0) {
            for (var i = 0; i < rewards.length - 1; i++) {
                $("#new_reward").trigger('click');
            }
            var packages = $('.reward_div');
            for (var i = 0; i < packages.length; i++) {
                var id = packages[i].id;
                var $view = $("#" + id + "");
                $view.find("input[name='id']").val(rewards[i].id);
                $view.find("input[name='support']").val(rewards[i].support);
                $view.find("input[name='title']").val(rewards[i].title);
                $view.find("input[name='introduce']").val(rewards[i].introduce);
                $view.find("select[name='provideYear']").find("option:contains('"+rewards[i].provideYear+"')").attr("selected",true);
                $view.find("select[name='provideMonth']").find("option:contains('"+rewards[i].provideMonth+"')").attr("selected",true);
            }
        }


        // 标题的点击
        $("#project_material").click(function () {
            if (project != null){
                window.location.href = "/web/project_material?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        $("#project_base").click(function () {
            if (project != null){
                window.location.href = "/web/project_base?id=" + project.projectId;
            }
        })
        $("#project_detail").click(function () {
            console.log("???")
            if (project != null){
                window.location.href = "/web/project_detail?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        $("#project_reward").click(function () {
            if (project != null){
                window.location.href = "/web/project_reward?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        $("#project_team").click(function () {
            if (project != null){
                window.location.href = "/web/project_team?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        //预览

        $("#preview").click(function () {
            window.location.href = "/web/project_preView?projectId=" + project.projectId;
        })

    });
</script>
</body>
</html>